
<template>
  <div id="register">
    <mt-header fixed title="注册账号" class="head">
      <div slot="left">
        <mt-button style="margin-left:15%;"  @click="goback()">
          <
        </mt-button>    
      </div>
    </mt-header>

    <div class="form" v-bind:class="{'formFocus':is1}">
        <span v-bind:class="{'fontFocus':is1}">用户名</span>
        <input type="text" placeholder="你的用户名" @click="change(1)" v-model="userName">
    </div>
    <div class="form" v-bind:class="{'formFocus':is2}">
        <span v-bind:class="{'fontFocus':is2}">密码</span>
        <input type="password" placeholder="请输入密码" @click="change(2)"  v-model="Pw">
    </div>
    <div>
        <button class="signin" @click="register">注册</button>
    </div>
    


  </div>
</template>

<script>
    import { MessageBox } from 'mint-ui';
   import axios from 'axios'
  export default {
  name: 'app',
  data () {
    return {
        userName:"",
        Pw:"",
        is1:false,
        is2:false
    }
  },
  methods:{
       register(){
    //     if(this.userName==""||this.Pw==""){
    //         MessageBox.alert("请输入用户名或密码", "提示");
    //     }else{
    //         var params=new URLSearchParams();
    //         params.append('id',this.userName);
    //         params.append('Pw',this.Pw);
    //         var _this = this
    //         axios.post('/users/registr',params).then(function(res){
    //             if(res.data.result){
    //                 console.log(res.data.result);
    //                 _this.$router.go(-1);
                
    //             }else{
    //                 alert('404')
    //             }
    //         }).catch(function(err){
    //             console.log(err);
    //         })
    //     }
       },
      change(i){
          if(i==1){
            this.is1=true;
            this.is2=false;
          }else if(i==2){
            this.is1=false;
            this.is2=true;
          }
      },
    goback(){
       this.$router.go(-1);
    },
    goRegister(){
        this.$router.push({path: 'register'})
    }
  }
 
}
</script>

<style>
    #register{
       background-color: #e5e8eb;
      padding-top:40%;
      padding-bottom:800%; 
         
    }
    #register .head{
      background-color: #2c46a5
    }
#register .form{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 350%;
    padding-bottom: 2%;
    border-bottom:2px #999 solid; 
    margin-top: 8%;
}
#register .formFocus{
    border-bottom:2px #2c46a5 solid; 
}
#register .fontFocus{
    color:#2c46a5;
}
#register .form input{
    background-color:#e5e8eb;
    border: 0px;
  margin-left: 5%;
  width:60%;
  font-size: 85%;
}
#register .form input:focus{
    outline:none;
}
#register .signin{
  padding: 2% 0px;
  margin-top: 8%;
  margin-left: 2%;
  margin-right: 2%;
  width:80%;
  background-color: #2c46a5;
  color:#fff;
  border: 0px;
  border-radius: 5px;
  font-size: 300%;
}
 /*message*/
 .mint-msgbox-title{
     font-size: 300%;
     margin-top: 5%;
 }
 .mint-msgbox-message{
     font-size: 300%;
     margin: 10% 0px;
 }
 .mint-msgbox-btns{
    font-size: 300%;
    height:100px;
 }
</style>
